<script lang="ts" setup>
import {computed} from 'vue'
import del from '@/assets/del.png'
import edit from '@/assets/edit.png'

const props = defineProps({
  type: {
    type: String,
    default: ''
  },
  text: {
    type: String,
    default: '确定'
  },
})

const emits = defineEmits(['clickType'])

const realIcon = computed(() => {
  if (props.type === 'edit') {
    return edit
  }
  if (props.type === 'del') {
    return del
  }
  return ''
})


const clickBtn = () => {
  console.log('点击了按钮')
  emits('clickType', props.type)
}
</script>

<template>
  <view class="simple-btn" @tap="clickBtn">
    <image :src="realIcon" class="btn-icon"></image>
    <text class="btn-label">{{ props.text }}</text>
  </view>
</template>

<style scoped lang="scss">
@import "@/styles/minxi.scss";

.simple-btn {
  @include flex-center;

  .btn-icon {
    width: 27rpx;
    height: 27rpx;
  }

  .btn-label {
    margin-left: 12rpx;
    @include text-style(26rpx, #333, 400);
  }
}
</style>